import 'package:flutter/material.dart';

void main() {
  runApp(const CounterApp());
}

class CounterApp extends StatelessWidget {
  const CounterApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '计数器应用',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const CounterHome(),
    );
  }
}

class CounterHome extends StatefulWidget {
  const CounterHome({super.key});

  @override
  State<CounterHome> createState() => _CounterHomeState();
}

class _CounterHomeState extends State<CounterHome> {
  int _counter = 0;
  final List<String> _history = [];
  final ScrollController _scrollController = ScrollController();

  void _incrementCounter() {
    setState(() {
      _counter++;
      _history.add('+1 (当前: $_counter)');
      // 滚动到列表底部
      _scrollController.animateTo(
        _scrollController.position.maxScrollExtent,
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeOut,
      );
    });
  }

  void _decrementCounter() {
    if (_counter > 0) {
      setState(() {
        _counter--;
        _history.add('-1 (当前: $_counter)');
        // 滚动到列表底部
        _scrollController.animateTo(
          _scrollController.position.maxScrollExtent,
          duration: const Duration(milliseconds: 300),
          curve: Curves.easeOut,
        );
      });
    }
  }

  void _resetCounter() {
    if (_counter > 0) {
      setState(() {
        _counter = 0;
        _history.add('重置为0');
        // 滚动到列表底部
        _scrollController.animateTo(
          _scrollController.position.maxScrollExtent,
          duration: const Duration(milliseconds: 300),
          curve: Curves.easeOut,
        );
      });
    }
  }

  @override
  void dispose() {
    // 释放控制器资源
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('高级计数器应用'), centerTitle: true),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 图标组件 - 显示计数器图标
            const Icon(Icons.calculate, size: 100, color: Colors.blue),
            const SizedBox(height: 20),

            // 文本组件 - 显示当前计数
            Text(
              '$_counter',
              style: const TextStyle(
                fontSize: 80,
                fontWeight: FontWeight.bold,
                color: Colors.blue,
              ),
            ),
            const SizedBox(height: 40),

            // 按钮组件组 - 增加、减少和重置按钮
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                // 减少按钮
                ElevatedButton(
                  onPressed: _decrementCounter,
                  style: ElevatedButton.styleFrom(
                    padding: const EdgeInsets.all(16),
                    shape: const CircleBorder(),
                    backgroundColor: Colors.red,
                  ),
                  child: const Icon(Icons.remove),
                ),
                const SizedBox(width: 20),

                // 增加按钮
                ElevatedButton(
                  onPressed: _incrementCounter,
                  style: ElevatedButton.styleFrom(
                    padding: const EdgeInsets.all(16),
                    shape: const CircleBorder(),
                    backgroundColor: Colors.green,
                  ),
                  child: const Icon(Icons.add),
                ),
              ],
            ),
            const SizedBox(height: 20),

            // 重置按钮
            ElevatedButton(
              onPressed: _resetCounter,
              style: ElevatedButton.styleFrom(
                padding: const EdgeInsets.symmetric(
                  horizontal: 32,
                  vertical: 16,
                ),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8),
                ),
              ),
              child: const Text('重置计数器', style: TextStyle(fontSize: 16)),
            ),
            const SizedBox(height: 40),

            // 可滚动组件 - ListView显示计数历史
            const Text(
              '操作历史',
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
                color: Colors.blue,
              ),
            ),
            const SizedBox(height: 10),
            Expanded(
              child: Container(
                margin: const EdgeInsets.symmetric(horizontal: 20),
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.grey),
                  borderRadius: BorderRadius.circular(10),
                ),
                child: ListView.builder(
                  controller: _scrollController,
                  itemCount: _history.length,
                  itemBuilder: (context, index) {
                    return ListTile(
                      title: Text(_history[index]),
                      trailing: Icon(
                        index % 2 == 0
                            ? Icons.arrow_upward
                            : Icons.arrow_downward,
                        color: index % 2 == 0 ? Colors.green : Colors.red,
                      ),
                    );
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
